<template>

  <div id="myrightGroup">
 
    <div v-if="isSearch" class="searchsesWrap">

  <div  id="sets1">
    <div class="selectDiv" @click="selectDivClick" >
      <span>{{messages}}</span>
      <!-- <img src="../../../static/cart/arrow-down.png" width="10" alt=""> -->
      <img v-bind:src="imgUrl" width="10" alt="">
    </div>
    <div class="searchDiv" >
      <search
      @result-click="resultClick"
      @on-change="getResult"
      :results="results"
      v-model="value"
      cancel-text="取消"
      :autoFixed="true"
      auto-scroll-to-top top=""
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      position="absolute"
      ref="search" style="" ></search>
    </div>
  </div>
    <!-- 清除 -->
      <div class="showDiv" v-if="showDiv">
        <checker
              default-item-class="demo4-item"
              selected-item-class="demo4-item-selected"
              disabled-item-class="demo4-item-disabled">
                <checker-item v-for="(item,index)  in showDivData" :key="index" :value="item" @on-item-click="onItemClick">{{item}}</checker-item>
              </checker>
      </div>

    </div>

    <div v-else>
          <search-page :searchData="searchData"></search-page>
    </div>
    
  </div>
</template>

<script>
import {
  Popup,
  TransferDom,
  Checker,
  XHeader,
  CheckerItem,
  Panel,
  XSwitch,
  Search,
  Group,
  Cell,
  Scroller,
  Flexbox,
  FlexboxItem,
  Divider,
  Grid,
  GridItem,
  GroupTitle,
  XInput
} from "vux";
import menu from "./menu.js";
import ExampleStart from "./ExampleStart";

import searchPage from "../../components/toolComponent/searchPage.vue";

import { homeUrl } from "../../components/utils/utils.js";

import $ from "jquery";
$(function() {
  $("#myGrid .weui-grid__icon").height($("#myGrid .weui-grid__icon").width());
});
import axios from "axios";
import qs from "qs";

export default {
  components: {
    Popup,
    TransferDom,
    searchPage,
    Search,
    Group,
    Cell,
    ExampleStart,
    Scroller,
    Flexbox,
    FlexboxItem,
    Divider,
    Grid,
    GridItem,
    GroupTitle,
    XInput,
    Panel,
    XSwitch,
    Checker,
    CheckerItem,
    XHeader
  },
  watch: {
    $route: "getClassifyArr"
  },
  methods: {
    // ‘全部’的div弹出
    selectDivClick() {
      this.showDivFn();
    },
    showDivFn() {
      console.log("xxx")
      if (this.showDiv == true) {
        this.showDiv = false;
        this.imgUrl = "../../../static/cart/up.png";
      } else {
        this.showDiv = true;
        this.imgUrl = "../../../static/cart/down.png";
      }
    },
    // 修改分类数据的结构
    modifyMinData(dataArr) {
      // 修改右侧小分类数据的结构
      if (dataArr.length <= 0) {
        return;
      }
      var resultArr = [];
      var previorName = dataArr[0].bigName;
      var tempDic = {};
      var minTempArr = [];
      for (var i = 0; i < dataArr.length; i++) {
        var data = dataArr[i];
        var bigName = data.bigName;
        var minName = data.minName;
        if (bigName != previorName) {
          tempDic["name"] = previorName;
          tempDic["datas"] = minTempArr;
          resultArr.push(tempDic);
          tempDic = {};
          minTempArr = [];
          previorName = bigName;
        } else {
          minTempArr.push(minName);
        }
      }
      this.$data.classifyArr = resultArr;
    },
    // 获取分类数据
    getClassifyArr() {
      // 获取分类数据
      this.$http.get(homeUrl() + "getMinClassify/").then(
        result => {
          if (result.data.status == "ok") {
            // 修改右侧分类数据的结构
            this.modifyMinData(result.data.data);
          }
          this.$vux.toast.text(result.data.message, "bottom");
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    onItemClick(itemValue, itemDisabled) {
      console.log(itemValue);
      this.messages=itemValue;
      this.showDiv=false;
    },
    setFocus() {
      this.$refs.search.setFocus();
    },
    resultClick(item) {
      // this.$router.go(0)
      this.$data.isSearch = false;
      console.log("llll");
      console.log(JSON.stringify(item));
      this.searchData = JSON.stringify(item);
    },
    getResult(val) {
      console.log("on-change", val);
      this.results = val ? getResults(this.value) : [];
      // console.log(getResults(this.value))
    },
    onSubmit() {
      this.$refs.search.setBlur();
      this.$vux.toast.show({
        type: "text",
        position: "top",
        text: "on submit"
      });
    },
    onFocus() {
      console.log("on focus");
      this.showDiv = false; //去除div
      // this.$router.push({name: 'goSearch', params: {}})
    },
    onCancel() {
      this.showDiv = false; //去除div
      this.$data.isSearch = false;
    },
    onScroll(event) {
      // console.log(this.$refs.myGroup[0].$el.getBoundingClientRect().height)
      var currentScrollTop = event.top;
      // console.log(this.$refs.groupTitle[0].$el.getBoundingClientRect().top)
      var allGroup = this.$refs.myGroup;
      var calHeight = 0;
      for (var i = 0; i < allGroup.length; i++) {
        calHeight += allGroup[i].$el.getBoundingClientRect().height;
        if (currentScrollTop < calHeight - 100) {
          this.$data.currentLeftIndex = i;
          return;
        }
      }
    },
    onCellClick(clickIndex) {
      var allGroup = this.$refs.myGroup;
      var toTop = 0;
      for (var i = 0; i < clickIndex; i++) {
        toTop += allGroup[i].$el.getBoundingClientRect().height;
      }

      this.$refs.rightScroller.reset({ top: toTop, duration: 1000 });
      this.$data.currentLeftIndex = clickIndex;
    }
  },
  created() {
    // 组件完成后获取数据,
    // 此时data已经被observed 了
    this.$vux.loading.show({
      text: "loading"
    });
    var that = this;
    setTimeout(() => {
      this.$vux.loading.hide();
    }, 1000);
    this.getClassifyArr();
  },
  mounted() {
    var windowHeight = $(window).height();
    var headerHeight = $(".vux-header").outerHeight();
    var searchBoxHeight = $(".vux-search-box").outerHeight();
    var tabHeight = $(".weui-tabbar").outerHeight();
    this.$data.myHeight =
      windowHeight - headerHeight - searchBoxHeight - tabHeight + "px";
  },
  data() {
    return {
      position: "default",
      showPositionValue: false,
      isSearch: true,
      results: [],
      value: "",
      active: [],
      myCols: 2,
      currentLeftIndex: 0,
      myHeight: "100px",
      classifyArr: [],
      searchData: [],
      showDiv: false,
      showDivData: ["全部","分类", "商品名", "关键字", "店铺名"],
      imgUrl: "../../../static/cart/down.png",
      messages:"全部"
    };
  },

  computed: {
    pageSections() {
      const flatten = (tree, level = 1) => {
        const treeCloned = JSON.parse(JSON.stringify(tree));
        let flattened = [];
        treeCloned.forEach(branch => {
          const { children } = branch;
          delete branch.children;
          branch.level = level;
          flattened.push(branch);
          if (children) {
            flattened = [...flattened, ...flatten(children, level + 1)];
          }
        });
        return flattened;
      };
      return flatten(menu);
    }
  }
};

function getResults(val) {
  var rs = [];
  var dataList = qs.stringify({
    queryStr: val,
    fieldName: "keywords"
  });
  axios
    .post(homeUrl() + "getGoodsBySomething/", dataList, { emulateJSON: true })
    .then(
      result => {
        console.log(result);
        var objArr = [];
        if (result.data.status == "ok") {
          objArr = result.data.data;
          console.log(objArr.length);
          for (var i = 0; i < objArr.length; i++) {
            rs.push({
              title: objArr[i],
              other: { data: objArr[i] }
            });
          }
          // console.log(".....")
        }
      },
      error => {
        this.$vux.toast.text("网络请求失败....", "bottom");
        console.log(error);
      }
    );
  return rs;
}
</script>
<style lang="less" >
.searchsesWrap{
  background: #f4f4f4;
  height: 46px;
  width: 100%
}
#sets1 {
  width: 100%;
  height: 32px;
  // z-index: 1000000;
  // background: #ffffff
  // margin-top: 46px
}
.selectDiv {
  // margin-top: 46px;
  width: 16%;
  height: 100%;
  border: 1px solid #e6e6ea;
  background: #ffffff;
  float: left;
  text-align: center;
  padding-top: 10px;
  z-index: 10000
}
.searchDiv {
  width: 80%;
  float: left;
}
.showDiv {
  position: fixed;
  top: 6.625rem;
  width: 100%;
  height: 6.25rem;
  padding: 0.5rem;
  padding-top: 1.5rem;
  z-index: 9999999999;
  background: white;
  box-shadow: 0px 1px 3px #888888;
}

.contentWrap {
  margin-top: 92px;
}
/* 左侧滚动区域 */
.leftScroll .weui-cell .vux-label {
  color: #666;
}

#myrightGroup .weui-cells {
  margin-top: 0;
  // background-color: #F4F8FB
}
.active {
  border: 1px solid orange;
}
cell {
}
.grid-center {
  display: block;
  text-align: center;
  color: #666;
}
.grid-center img {
  width: 100%;
}

/* 分类界面 右边boder边线问题 */
#myGrid .weui-grid__icon {
  width: auto;
  height: 130px;
}
#myGrid .weui-grid__icon img {
  border-radius: 10px;
}
#myGrid::after {
  border-left: 0px;
}
#myGrid::before {
  border-top: 0px;
}
#myGrid .weui-grid::before {
  border-right: 0px;
}
#myGrid .weui-grid::after {
  border-bottom: 0px;
}

.demo4-item {
  background-color: #ddd;
  color: #222;
  width: 3rem;
  text-align: center;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  border-radius: 10px;
}
.demo4-item-selected {
  background-color: #ff3b3b;
  color: #fff;
}
.demo4-item-disabled {
  color: #999;
}
.weui-search-bar:after {
    content: " ";
    position: absolute;
    left: 200px!important;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #D7D6DC;
    color: #D7D6DC;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
#myrightGroup .vux-search-box{
   left:10%;
   z-index: 0;
  // width:86%
}
#myrightGroup .weui-search-bar_focusing{
  left:15%;
  width:86%
}
#myrightGroup .vux-search-fixed {
    position: fixed;
    left:0;
    top: 0;
  //   left:10%;
  // width:86%;
    z-index: 0;
    background: transparent;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
#myrightGroup .weui-search-bar {
    position: relative;
    padding: 8px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    /* background-color: #FFFFFF; */
}
#sets1 .weui-search-bar {
    position: relative;
    padding: 8px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    background-color: #f4f4f4;
}

</style>
